<template>
  <div class="ai-box">
    <div class="top-list">
      <div class="ab-box">
        <div class="content-box">
          <div v-for="(item, i) in messages" :key="i" class="talk-item" :class="{ 'my-style': item.id == socketId }">
            <div v-if="item.id == socketId" class="type-me">我</div>
            <div v-else class="type-ai">{{ item.id }}</div>
            <div class="time-box">{{ item.time }}</div>
            <div>:</div>
            <div class="word-box">{{ item.msg }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="use-box">
      <textarea class="use-text" placeholder="请输入内容" v-model="query" rows="4"></textarea>
      <button class="use-btn" @click="send">发送</button>
    </div>
  </div>
</template>

<script lang="ts">
import { sendMessage, socketId, messages} from '@/socket/index'

export default {
  data() {
    return {
      query: '',
      socketId,
      messages
    }
  },
  methods: {
    send() {
      sendMessage(this.query)
      this.query = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.ai-box{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .top-list{
    width: 100%;
    flex: 1;
    position: relative;
    .ab-box{
      position: absolute;
      top: 15px;
      left: 10%;
      right: 10%;
      bottom: 40px;
      .content-box{
        width: 100%;
        height: 100%;
        overflow: auto;
        border: 3px solid #eee;
        .talk-item{
          padding: 10px 20px;
          display: flex;
          border-bottom: 1px solid #eee;
          &.my-style{
            flex-direction: row-reverse;
            .word-box{
              text-align: right;
              color: #333;
            }
          }
          .type-me{
            color: red;
          }
          .type-ai{
            color: blue;
          }
          .word-box{
            font-weight: bold;
            flex: 1;
            color: #686868;
          }
        }
      }
    }
  }
  .use-box{
    display: flex;
    padding: 15px;
    justify-content: center;
    border-top: 3px solid #eee;
    .use-text{
      height: 300px;
      resize: none;
      width: 80%;
    }
    .use-btn{
      width: 80px;
    }
  }
}
</style>
